<template>
	<view class="personalcenter-container">
		<view class="u-flex personalcenter-header" @tap="toPageJump('personalInformation')">
			<image class="header-img" :src="userInfo?.avatar?userInfo?.avatar:getimageUrl('user.png')">
			</image>
			<view class="header-info">
				<view class="header-name">{{userInfo?.realname}}</view>
				<view class="header-phone">{{mobileHide(userInfo?.phone)}}</view>
			</view>
		</view>

		<view class="personalcenter-card personalcenter-income m-b-20">
			<view class="u-flex u-flex-between">
				<text class="personalcenter-card-title">我的收益</text>
				<view class="u-flex u-flex-items-center title-rigth" @tap="toRevenueDetails">钱包明细<u-icon
						name="arrow-right" color="#979797" size="20rpx"></u-icon></view>
			</view>

			<view class="u-flex u-flex-between u-flex-items-end personalcenter-balance">
				<view class="balance-cont">
					<view class="balance-title">余额</view>
					<text class="balance-num">{{userBurse.wfBurseAmount}}</text><text class="balance-unit">元</text>
				</view>
				<view class="">
					<u-button type="primary" hairline="false" shape="circle" size="mini" text="提现" color="#FF5151"
						@tap="toWithdrawalAmount"></u-button>
				</view>
			</view>

			<view class="u-flex u-flex-between balance-footer-mian">
				<view class="balance-footer">
					<view class="u-flex u-flex-items-end u-flex-between footer-title">
						<text class="footer-title-text">已省</text>
						<view class="u-flex footer-title-right" @tap="toWXPageJump('index')">去抢单<u-icon
								name="arrow-right" color="#979797"></u-icon></view>
					</view>
					<view class="u-flex u-flex-items-end  footer-money">
						<view class="footer-money-num">{{userBurse.orderRefund}}</view><text
							class="footer-money-unit">元</text>
					</view>
				</view>

				<view class="balance-footer">
					<view class="u-flex u-flex-items-end u-flex-between footer-title">
						<text class="footer-title-text">已赚</text>
						<view class="u-flex footer-title-right" @tap="toWXPageJump('makeMoney')">去赚钱<u-icon
								name="arrow-right" color="#979797"></u-icon></view>
					</view>
					<view class="u-flex u-flex-items-end footer-money">
						<view class="footer-money-num">{{userBurse.creditInvitation}}</view><text
							class="footer-money-unit">元</text>
					</view>
				</view>
			</view>

		</view>


		<view class="personalcenter-card personalcenter-invite m-b-20">
			<view class="u-flex u-flex-between m-b-20" @tap="toMyInvitation">
				<text class="personalcenter-card-title">我的邀请</text>
				<view class="u-flex u-flex-items-center title-rigth">
					查看详情<u-icon name="arrow-right" color="#979797" size="20rpx"></u-icon>
				</view>
			</view>

			<view class="u-flex u-flex-between u-flex-items-end m-b-20">
				<view class="invite-cont">
					<view class="invite-num">{{userInvite.income}}</view>
					<text class="invite-lable">我的收益</text>
				</view>
				<view class="invite-cont invite-cont-segment">
					<view class="invite-num">{{userInvite.memberNum}}</view>
					<text class="invite-lable">我的团员</text>
				</view>
				<view class="invite-cont">
					<view class="invite-num">{{userInvite.memberOrderNum}}</view>
					<text class="invite-lable">团员订单</text>
				</view>
			</view>

			<view class="">
				<u-button type="primary" hairline="false" shape="circle" text="立即邀请" color="#FF5151"
					@tap="toPageJump('inviteMerchant')"></u-button>
			</view>

		</view>

		<view class="personalcenter-card personalcenter-serve">
			<view class="u-flex u-flex-between m-b-20">
				<text class="personalcenter-card-title">我的服务</text>
			</view>

			<view class="u-flex u-flex-between u-flex-items-end">
				<view class="serve-cont">
					<image class="serve-img m-b-10" :src="getimageUrl('person-1.png')">
					</image>
					<view class="serve-lable">商家入驻</view>
				</view>
				<view class="serve-cont" @tap="toPageJump('beginnerTutorial')">
					<image class="serve-img m-b-10" :src="getimageUrl('person-2.png')">
					</image>
					<view class="serve-lable">新手指南</view>
				</view>
				<view class="serve-cont">
					<image class="serve-img m-b-10" :src="getimageUrl('person-3.png')">
					</image>
					<view class="serve-lable">客服中心</view>
					<!-- 客服 -->
					<button open-type="contact" class="serve-contact">
						客服
					</button>
				</view>
				<view class="serve-cont">
					<image class="serve-img m-b-10" :src="getimageUrl('person-4.png')">
					</image>
					<view class="serve-lable">关于我们</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, getCurrentInstance, unref, onMounted } from "vue";
	import { getimageUrl, mobileHide } from '@/util/util.js';
	import { onShow } from '@dcloudio/uni-app';
	import { queryUserInvite, queryUserBurse } from '@/common/mine.api';

	const { proxy } = getCurrentInstance();
	const userInfo = ref();
	const userInvite = ref({
		income: 0,
		memberNum: 0,
		memberOrderNum: 0
	})
	const userBurse = ref({
		wfBurseAmount: 0,
		orderRefund: 0,
		creditInvitation: 0,
		todayEarnings: 0,
		wfBurseId: 0,
	})

	onMounted(async () => {
		if (unref(proxy['vuex_token']) === '') {
			return uni.redirectTo({
				url: 'pages/login/login'
			})
		}

	})

	onShow(async () => {
		console.log('更新')
		userInfo.value = unref(proxy['vuex_user']);
		userInvite.value = await queryUserInvite()
		userBurse.value = await queryUserBurse()
	})

	function toPageJump(type) {
		var genderMap = {
			'index': '/pages/searchShop/searchShop',
			'personalInformation': '/pages/personalInformation/personalInformation',
			'inviteMerchant': '/pages/personalCenter/inviteMerchant',
			'beginnerTutorial': '/pages/beginnerTutorial/beginnerTutorial',
		};

		uni.navigateTo({
			url: genderMap[type]
		});
	}

	function toWXPageJump(type) {
		var genderMap = {
			'index': '/pages/index/index',
			'makeMoney': '/pages/makeMoney/makeMoney'
		};
		uni.switchTab({
			url: genderMap[type]
		});

		// wx.redirectTo({
		// 	url: genderMap[type]
		// })
	}

	function toRevenueDetails() {
		uni.navigateTo({
			url: `/pages/revenueDetails/revenueDetails?todayEarnings=${unref(userBurse).todayEarnings}&wfBurseId=${unref(userBurse).wfBurseId}&wfBurseAmount=${unref(userBurse).wfBurseAmount}`
		});
	}

	function toMyInvitation() {
		uni.navigateTo({
			url: `/pages/myInvitation/myInvitation?income=${unref(userInvite).income}&memberNum=${unref(userInvite).memberNum}&memberOrderNum=${unref(userInvite).memberOrderNum}`
		});
	}

	function toWithdrawalAmount() {
		uni.navigateTo({
			url: `/pages/withdrawalAmount/withdrawalAmount?wfBurseId=${unref(userBurse).wfBurseId}&wfBurseAmount=${unref(userBurse).wfBurseAmount}`
		});
	}
</script>

<style lang="scss" scoped>
	.personalcenter-container {
		position: relative;
		padding-top: 310rpx;
		margin-bottom: 10rpx;

		.personalcenter-header {
			top: 0;
			width: calc(100% - 40rpx);
			padding: 130rpx 20rpx 120rpx 20rpx;
			background: linear-gradient(180deg, #FF2A47 0%, #FE7E17 100%);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			position: absolute;


			.header-img {
				height: 150rpx;
				width: 150rpx;
				border-radius: 50%;
			}

			.header-info {
				padding: 20rpx;
			}

			.header-name {
				font-size: 32rpx;
				padding-bottom: 30rpx;
			}

			.header-phone {
				font-size: 28rpx;
			}
		}

		.personalcenter-card {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.personalcenter-card-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.title-rigth {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
		}

		.personalcenter-income {
			position: relative;
			z-index: 20;

			// top: -70rpx;
			.personalcenter-balance {
				margin-top: 20rpx;
				color: #333333;
				font-weight: 500;

				.balance-title {
					font-size: 24rpx;
					margin-bottom: 10rpx;
				}

				.balance-num {
					font-size: 38rpx;
					font-weight: 600;
					color: #FA682C;
				}

				.balance-unit {
					font-size: 22rpx;

				}
			}
		}

		.balance-footer-mian {
			margin-top: 20rpx;

			.balance-footer {
				width: calc(45% - 20rpx);
				padding: 20rpx;
				background: #F3F3F3;
				border-radius: 6rpx 6rpx 6rpx 6rpx;


				.footer-title {
					font-weight: 400;
					color: #999999;
					margin-bottom: 10rpx;

					.footer-title-text {
						font-size: 24rpx;

					}

					.footer-title-right {
						font-size: 20rpx;
					}
				}
			}

			.footer-money {
				color: #333333;

				.footer-money-num {
					font-size: 26rpx;
					font-weight: 600;
					padding-right: 5rpx;
				}

				.footer-money-unit {
					font-size: 22rpx;
					font-weight: 500;
				}
			}

		}

		.personalcenter-invite {
			.invite-cont {
				width: 30%;
				text-align: center;
				position: relative;

				.invite-num {
					font-size: 34rpx;
					font-weight: 700;
					color: #333333;

				}

				.invite-lable {
					font-size: 24rpx;
					font-weight: 400;
					color: #9E9E9E;
				}
			}

			.invite-cont-segment::before {
				position: absolute;
				content: "";
				width: 1rpx;
				height: 40rpx;
				background-color: #D8D8D8;
				top: 20%;
				right: -1rpx;
				border-radius: 3px;
			}

			.invite-cont-segment::after {
				position: absolute;
				content: "";
				width: 2rpx;
				height: 40rpx;
				background-color: #D8D8D8;
				top: 20%;
				left: -1rpx;
				border-radius: 3px;
			}
		}

		.serve-cont {
			text-align: center;
			position: relative;
			overflow: hidden;

			.serve-img {
				width: 50rpx;
				height: 50rpx;
			}

			.serve-lable {
				font-size: 26rpx;
				color: #333333;
				line-height: 26rpx;
			}
			
			.serve-contact{
				width: 100%;
				position: absolute;
				top: 0;
				opacity: 0;
			}
		}

	}
</style>